<template>
    <div class="g-title" :style="{ backgroundColor: `${backgroundColor}` }">
        <div>
            <!-- <div v-if="menuButton" class="text"> -->
            <div v-if="menuButton" class="df aic jcc" style="width: 12.5rem;height: 6.25rem;">
                <div class="text">
                    <img v-if="textColor != '#fff'" style="height: 1.875rem" src="../assets/images/logo_b.png" alt="">
                    <img v-else style="height: 1.875rem" src="../assets/images/LIECHEBAO.png" alt="">
                    <!-- <div :style="{ color: `${textColor}` }" style="margin-top: 0.625rem;">{{ companyName }}</div> -->
                    <!-- <el-select v-model="companyC">
                        <el-option v-for="item in changeCompanyList" :key="item.node" :label="item.name"
                            :value="item.node" />
                    </el-select> -->
                    <div style="height: 1.25rem;"></div>
                    <el-dropdown @command="changeCompanyName" class="custom_dropdown" :disabled="!changeCompanyFlag">
                        <span class="el-dropdown-link">
                            <div class="df aic jcc">
                                <div class="companyName" :style="{ color: `${textColor}` }">
                                    {{ companyName }}
                                </div>
                                <el-icon class="el-icon--right" :style="{ color: `${textColor}` }" v-if="changeCompanyFlag">
                                    <arrow-down />
                                </el-icon>
                            </div>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="item in changeCompanyList" :key="item.node"
                                    :command="item.node">{{ item.name }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <img v-else style="height: 1.75rem;margin: 2.25rem 1.25rem;" src="../assets/images/劣车logo.png" alt="">
        </div>
    </div>
    <!-- <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" -->
    <el-menu default-active="2" class="el-menu-vertical-demo" active-text-color="#116CF8" router
        :background-color="backgroundColor" :collapse="!props.menuButton" :unique-opened="flag" :textColor="textColor">

        <template v-for="item in menuRoutes" :key="item.uri">
            <el-menu-item :index=item.uri v-if="item.children == null">
                <template #title>
                    {{ item.iconUrl }}
                    <el-icon>
                        <div v-html="item.iconUrl"></div>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </template>
            </el-menu-item>
            <el-sub-menu :index="item.uri" v-else>
                <template #title>
                    <el-icon>
                        <div v-html="item.iconUrl"></div>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </template>
                <template v-for="val in item.children" :key="val.uri">
                    <el-menu-item :index="val.uri" v-if="val.children == null">{{ val.name }}</el-menu-item>
                    <el-sub-menu :index="val.uri" v-else>
                        <template #title>{{ val.name }}</template>
                        <el-menu-item v-for="it in val.children" :key="it.uri" :index="it.uri">{{ it.name
                            }}</el-menu-item>
                    </el-sub-menu>
                    <!-- <el-menu-item v-for="val in item.children" :key="val.uri" :index="val.uri">{{ val.name }}</el-menu-item> -->
                </template>
            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { RequestEmployeeGetCompanyOfEmployee, RequestEmployeeCheckoutCompany, RequestEmployeeGetfunctionTree } from '@/api/path/index.js'

import { ref } from 'vue'
// const router = useRouter()
const props = defineProps({
    menuButton: Boolean,
    backgroundColor: String,
    textColor: String,
})
const companyName = ref<any>('')

const changeCompanyList = ref<any>([])
const changeCompanyFlag = ref<any>(false)
const menuRoutes = ref<any>([])
const getData = () => {
    companyName.value = JSON.parse(localStorage.getItem('roleInfo')!).companyName
    RequestEmployeeGetCompanyOfEmployee().then((res: any) => {
        if (res.resultObj.length == 1) {
            changeCompanyFlag.value = false
        } else {
            changeCompanyFlag.value = true
        }
        console.log('changeCompanyList>>>>>>>>>>>>>', res.resultObj.length);
        changeCompanyList.value = res.resultObj
    })
    if (JSON.parse(localStorage.getItem('roleInfo')!).id == '-1') {
        menuRoutes.value = JSON.parse(localStorage.getItem('roleRoutes')!.replace(/{ title: '/g, '').replace(/' }/g, '')).filter((item: any) => item.name !== '欢迎页')
        // menuRoutes.value = menuRoutes.value.filter((item: any) => item.name !== '商城后台管理')
        // menuRoutes.value = menuRoutes.value.forEach((item: any) => {
        //     item.filter((item: any) => item.name !== '商城意见反馈')
        // });
        // menuRoutes.value = menuRoutes.value.filter((item: any) => item.name !== '优惠券管理')
        // menuRoutes.value = menuRoutes.value.filter((item: any) => item.name !== '商城意见反馈')
        // menuRoutes.value= menuRoutes.value.filter((item: any) => item.name !== '商城数据')
    } else {
        menuRoutes.value = JSON.parse(localStorage.getItem('roleRoutes')!.replace(/{ title: '/g, '').replace(/' }/g, '')).filter((item: any) => item.name !== '欢迎页')
    }
}
getData()
const changeCompanyName = (e: any) => {
    changeCompanyList.value.forEach((item: any) => {
        if (e == item.node) {
            companyName.value = item.name
        }
    });
    RequestEmployeeCheckoutCompany(e).then((res: any) => {
        if (res.success == true) {
            localStorage.setItem('roleInfo', JSON.stringify(res.resultObj))
            RequestEmployeeGetfunctionTree(res.resultObj).then((ress: any) => {
                if (ress.success == true) {
                    console.log('ress.resultObj[0]', ress.resultObj);
                    localStorage.setItem(
                        'roleRoutes',
                        JSON.stringify(ress.resultObj[0].children)
                    )
                    location.reload()
                    location.href = "/WelcomePage";
                }
            })
        }
    })
}
const flag = ref<true>(true)


</script>




<style lang="scss" scoped>
.g-title {
    height: 6.25rem;
    // line-height: 6.25rem;
    text-align: center;
    background: #fff;

    .text {
        width: 15.625rem;
        // height: 6.25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.el-menu {
    width: 100%;
    height: calc(100vh - 6.25rem);
    color: white;
    border-right: none;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;

    .el-menu-item {
        margin-left: 0rem;
    }
}

.el-menu::-webkit-scrollbar {
    width: 0rem;
}

.el-menu::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.el-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

:deep .el-sub-menu__title {
    padding: 1.25rem;
}

::v-deep .el-icon .icon path {
    fill: v-bind(textColor);
}

.companyName {
    font-size: 1rem;
    color: #000;
}
::v-deep .el-menu-item{
    user-select: none;
}
::v-deep .el-sub-menu__title{
    user-select: none;
}
.custom_dropdown .el-dropdown-link {
    width: 200px;
    outline: none !important;
    cursor: pointer !important;
    user-select: none !important;
}
</style>